<template>
  <!-- 文章列表页面 -->
  <div class="article-list">
    <SkeletonLoading v-if="skeleton" />

    <!-- 文章卡片组件 -->
    <ArticleCard
      v-else
      v-for="item in articleList"
      :key="item.id"
      :articleInfo="item"
      @click="router.push(`/article/${item.id}`)"
    />

    <div class="page">
      <el-pagination
        v-model:current-page="query.page"
        :page-size="query.pageSize"
        :disabled="false"
        layout="total, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import { getArticleListService } from "@/api/Articles";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import SkeletonLoading from "@/components/SkeletonLoading.vue";

const router = useRouter();

const skeleton = ref(true);

const query = ref({
  page: 1,
  pageSize: 6,
});

// 数据
const total = ref(null);
const articleList = ref([]);

// 分页
const handleSizeChange = (pageSize) => {
  query.pageSize = pageSize;
  getArticleList(query.value);
};
const handleCurrentChange = (page) => {
  query.page = page;
  getArticleList(query.value);
};

/**
 * 获取可用文章数据列表
 * @param query
 */
const getArticleList = async (query) => {
  await getArticleListService(query).then(({ data }) => {
    skeleton.value = false;
    articleList.value = data.records;
    total.value = data.total;
  });
};

onMounted(() => {
  getArticleList(query.value);
});
</script>

<style lang="scss" scoped>
.article-list {
  height: 102.5vh;
  overflow: auto;
  scrollbar-width: none;
  padding: 24px 18px;
  background: rgb(255, 255, 255);
  border-radius: 0px 0px 12px 12px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08);

  .page {
    display: flex;
    justify-content: end;
  }
}
</style>